<template>
    <el-dialog class="common-dialog" title="切换当前会员" :visible="showDialog" @close="cancel" destroy-on-close>
        <el-form ref="form" :model="form" label-width="100px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="会员关键字" class="form-item" prop="keyword">
                <el-input class="input-item" v-model="form.keyword" v-focus placeholder="请输入会员手机号码、会员名称或扫码会员二维码" clearable maxlength="200" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submit()">确 定</el-button>
            <el-button @click="cancel()">取 消</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { getMemberInfo } from "@/api/cashier";
export default {
    props: {
      showDialog: {
        type:[Boolean],
        default:()=>false
      }
    },
    // 自动获取焦点
    directives: {
      focus: {
        inserted: function (el) {
          el.querySelector('input').focus()
        }
      }
    },
    data(){
        return {
          loading: false,
          form: { keyword: '' },
          memberInfo: {}
        }
    },
    created() {
       // empty
    },
    methods: {
        submit() {
          const app = this;
          const keyword = this.form.keyword.trim();
          if (keyword.length > 0) {
              getMemberInfo(this.form.keyword.trim()).then(response => {
                if (response.data.memberInfo) {
                    app.memberInfo = response.data.memberInfo;
                    app.$emit('doSwitchMember', this.memberInfo);
                } else {
                    app.$modal.alert("未查询到该会员信息，请确认！");
                    return false;
                }
              })
          } else {
              app.$emit('doSwitchMember', null);
          }
        },
        cancel() {
           this.$emit('doSwitchMember',0);
        }
    }
}
</script>
<style scoped>
  .input-item >>> .el-input__inner {
    border: #00acac solid 2px;
    line-height: 50px;
    height: 50px;
  }
  .form-item >>> .el-form-item__label {
    line-height: 50px;
    height: 50px;
  }
</style>
